<script lang="ts">
import {defineComponent, PropType, h} from "vue"

export default defineComponent({
  name: "ShowState",
  props: {
    value: {
      required: true
    },
    enums: {
      type: Array as PropType<Array<{ value: string | number, label: string, [key: string]: any }>>,
      required: true
    }
  },
  setup(props) {
    return () => {
      if (typeof props.value === 'undefined' || props.enums.length === 0) return ''
      let text = ''
      let color = ''
      let value = props.value.toString()
      for (let row of props.enums) {
        if (value === (row.value.toString())) {
          text = row.label
          color = row.color ? row.color : '#ff0000'
          break;
        }
      }
      return h('span', {"style": {"color": color}, "data-value": value,"class":"app-font-weight"}, [text])
    }
  }
})
</script>